<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <style>
        .panel {
            width: 900px;
            margin: 10px auto;
        }

        .table img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="panel panel-primary">
            <!-- Default panel contents -->
            <div class="panel-heading">英雄列表管理</div>
            <div class="panel-body">
                <!-- 存放的搜索区域 -->
                <div class="row">
                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" id="hname" class="form-control" placeholder="输入英雄信息...">
                            <span class="input-group-btn">
                                <button class="btn btn-default" id="btn_search" type="button">搜索</button>
                            </span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->

                    <div class="col-lg-3 col-lg-offset-3">
                        <!-- 添加英雄的按钮 -->

                        <button type="button" class="btn btn-success">添加英雄</button>

                    </div>
                </div>

            </div>

            <!-- Table -->
            <table class="table">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>英雄名称</th>
                        <th>英雄性别</th>
                        <th>头像</th>
                        <th>操作区</th>
                    </tr>

                </thead>
                <tbody id="tbody">
                    <tr>
                        <td>1</td>
                        <td>大乔</td>
                        <td>女</td>
                        <td><img src="http://127.0.0.1:3001/assets/uploads/222.jpg"></td>
                        <td>
                            <button type="button" class="btn btn-warning">上传头像</button>
                            <button type="button" class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

    <script src="./libs/jquery/jquery.min.js"></script>
    <script>
        $(function () {
            // 表示页面加载完以后即调用get_hero_list()函数
            get_hero_list();

            // 2.0 给id=btn_search的按钮注册点击事件
            $('#btn_search').click(function(){
                get_hero_list();
            })
        })

        // 1.0 定义一个get_hero_list()函数负责发出ajax请求获取到所有的英雄列表数据
        function get_hero_list() {
            // 1.0.1 根据接口文档确定好api地址：http://127.0.0.1:3001/getHeroList
            // 确定好参数：heroName 代表获取某一个英雄
            $.ajax({
                url: 'http://127.0.0.1:3001/getHeroList',
                type: 'GET',
                data: {heroName:$('#hname').val()},
                success: function (resData) {
                    // 1.0.2 判断服务器响应回来的resData中的code，如果不等于200就提示用户错误信息
                    if (resData.code !== 200) {
                        alert(resData.msg);
                        return;// 阻止后续代码的继续执行
                    }

                    // 成功处理
                    console.log(resData)
                    // resData.data的格式：
                    /*
                    {
                        "code":200,
                    "msg":"请求成功",
                       "data":[
                           {"name":"程咬金","gender":"男","img":"http://127.0.0.1:3001/assets/uploads/222.jpg","id":2},
                           {"name":"白起","gender":"男","img":"http:\\127.0.0.1:3001\\assets\\uploads\\upload_7c7d7b3b30906cdb2bd241162075db82.jpg","id":"3"}
                        ]
                    }
                    */
                    let trsHtml = '';
                    resData.data.forEach(item => {
                        // item的格式：  {"name":"程咬金","gender":"男","img":"http://127.0.0.1:3001/assets/uploads/222.jpg","id":2},
                        let itemHtml = `<tr>
                                <td>${item.id}</td>
                                <td>${item.name}</td>
                                <td>${item.gender}</td>
                                <td><img src="${item.img}"></td>
                                <td>
                                    <button type="button" class="btn btn-warning">上传头像</button>
                                    <button type="button"  class="btn btn-danger">删除</button>
                                </td>
                            </tr>`;

                        trsHtml += itemHtml;
                    })

                    // 1.0.3 将trsHtml中的字符串赋值给
                    $('#tbody').html(trsHtml);
                }
            })

        }

    </script>
</body>

</html>